<template>
  <div class="mvlist">
    <van-nav-bar title="MV" left-arrow @click-left="onClickLeft" />
    <van-tabs>
      <van-tab v-for="type in area" :key="type.id">
        <template #title>
          <div class="type" @click="getMvList(type.id)">
            <p>{{ type.name }}</p>
          </div>
        </template>
        <div class="mvs">
          <div class="item" v-for="item in mvList" :key="item.vid">
            <img
              @click="goDetail('/home/mv', item.vid)"
              class="mv"
              :src="item.picurl"
              alt=""
            />
            <p>
              {{ item.title }}
            </p>
            <span
              class="singer"
              v-for="(singer, index) in item.singers"
              :key="singer.id"
              ><span v-if="index !== 0">-</span>{{ singer.name }}</span
            >
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({
    area: [],
    mvList: {}
  }),
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    async getCategory() {
      const res = await this.$http.getCategory()
      this.area = res.data.data.area
    },
    async getMvList(id) {
      const res = await this.$http.getMvList(id)
      this.mvList = res.data.data.list
      console.log(res.data.data.list[0])
    }
  },
  created() {
    this.getCategory()
    this.getMvList(15)
  }
}
</script>
<style lang="less">
.mvlist {
  .van-tab {
    background-color: rgba(96, 96, 97, 0.164);
    margin-right: 5px;
    margin-bottom: 10px;
  }
  .mvs {
    .item {
      margin-bottom: 20px;
      .mv {
        width: 100%;
        height: 100%;
      }
      .singer {
        font-size: 12px;
      }
    }
  }
  .van-tabs__line {
    display: none;
  }
}
</style>
